<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #video {
            height: 450px;
            width: 50%;
            margin: 0 auto;
            background-color: black;
        } 
        video {
            width:800px;
            display: block;
            width: 95%;
            margin: 0 auto;
        }
        #controls {
            box-sizing: border-box;
            width: 100%;
            height: 40px;
            border: 1px solid black;
            position: relative;
        }
        #controls a {
            color: white;
            text-decoration: none;
            line-height: 2em;
            margin-top: 4px;
        }
        #switch {
            position: absolute;
            left: 10px;
        }
        /* 进度条 */
        #progress {
            width: 65%;
            height: 18px;
            position: absolute;
            top: 5px;
            left: 50px;
            margin-top: 8px;
            border-radius: 10px;
            background-color: #5c5c5c;
        }
        #loaded {
            border-radius: 10px;
            position: absolute;
            width: 100px;
            height: 18px;
            background-color: #818181;
        }
        #current {
            border-radius: 10px;
            position: absolute;
            width: 50px;
            height: 18px;
            background-color: #dfdfdf;
        }
        #bar {
            border-radius: 10px;
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: yellow;
            opacity: 0;
        }
        /* 全屏 */
        #fullScreen {
            position: absolute;
            right: 10px;
        }
        /* 时间 */
        #time {
            width: 18%;
            height: 18px;
            position: absolute;
            top: 10px;
            right: 50px;
            /* background-color: white; */
        }
        #time span {
            float: left;
            color: white;
        }
        
    </style>
</head>
<body>
    <!-- <audio src="DAOKO,米津玄師 - 打上花火.mp3" controls autoplay loop></audio> -->
    <!-- poster指视频未播放时 显示的第一帧 默认是视频第一帧 可以设置 -->
    <!-- width/height 只能设置一个 -->
    <!-- controls的控件一般是自定义的  好看呀 -->
    <!-- <video src="2b.mp4" controls loop poster="super_small_2b.png" muted></video> -->

    <!-- 重点：source标签的使用 -->
    <!-- 因为不同浏览器对视频格式支持不一样 所以我们通过source标签给多个格式的视频 -->
    <!-- 它会一条一条执行  找到浏览器可以播放的格式 就跳过后面的source  -->
    <div id="video">
        <video poster="loading.gif" src="2b.mp4">
            <!-- <source src="2b.mp4" type="video/mp4">
            <source src="2b.avi" type="video/avi">
            你的浏览器不支持当前的视频播放 请更换浏览器 -->
        </video> 
        <div id="controls">
            <a href="" id="switch">▶</a>
            <div id="progress">
                <div id="loaded"></div>
                <div id="current"></div>
                <!-- bar就是单纯的用来响应事件的 没有实际用途 -->
                <div id="bar"></div>
            </div>
            <div id="time">
                <span id="currentTime">00:00:00</span>
                <span id="totalTime">/00:00:00</span>
            </div>
            <a href="" id="fullScreen">放大</a>
        </div>
    </div>
    <script src="jQuery-3.3.1.min.js"></script>
    <script>
        $(function(){
            // 获取播放器
            var video = $("video")[0];

            // 播放/暂停
            $("#switch").click(function(){
                if (video.paused) {
                    video.play();
                    $(this).text("| |");
                }else {
                    video.pause();
                    $(this).text("▶");
                }
                return false;
            });

            // 全屏操作
            var videoBox = $("#video")[0];
            $("#fullScreen").click(function(){
                // 浏览器不同 全屏引擎不同
                // 能力测试
                if(videoBox.requestFullscreen){
                    videoBox.requestFullscreen();
                }else if(videoBox.webkitRequestFullScreen){
                    videoBox.webkitRequestFullScreen();
                }else if(videoBox.mozRequestFullScreen){
                    videoBox.mozRequestFullScreen();
                }else if(videoBox.msRequestFullScreen){
                    videoBox.msRequestFullScreen();
                }

                if (document.cancelFullScreen) {
                    document.cancelFullScreen();
                }else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                }else if(document.mozCancelFullScreen){
                    document.mozCancelFullScreen();
                }else if(document.msCancelFullScreen){
                    document.msCancelFullScreen();
                }else if(document.oCancelFullScreen){
                    document.oCancelFullScreen();
                }
                return false;
            });

            // 当视频文件可以播放时触发下面的事件
            video.oncanplay=function(){
                
                // 获取当前视频文件的总时长(以秒做单位 有小数点) 计算时分秒
                var total = video.duration;
                var Result = getTimeResult(total); 
                // 
                $("#totalTime").text("/"+Result);        
            };      
        
            // 进度条+播放时间改变
            video.ontimeupdate = function(){
                // 获取当前播放时间
                var currentTime = video.currentTime;
                // 计算时分秒  修改当前时间
                $("#currentTime").text(getTimeResult(currentTime));
                // 动态修改当前进度条 通过width的百分比
                var percent = currentTime/video.duration*100+"%";
                $("#current").css("width",percent);
            };

            // 通过总时长(秒为单位 有精度)计算时分秒 函数封装
            function getTimeResult(time){
                var hour = Math.floor(time/3600);
                hour = hour<10?"0"+hour:hour;
                var mins = Math.floor(time%3600/60);
                mins = mins<10?"0"+mins:mins;
                var seconds = Math.floor(time%60);
                seconds = seconds<10?"0"+seconds:seconds;
                return hour+":"+mins+":"+seconds;
            };
            
            // 实现跳播功能
            $("#bar").click(function(e){
                // 获取鼠标现对于父元素的left值
                var offset = e.offsetX;
                // 计算偏移量现对于父元素总宽度的比例
                var percent = offset/$(this).width();
                // 计算这个位置 对应的进度条
                var current = percent*video.duration; 
                // 改变视频的currentTime 因为进度条会随着video.currentTime来改变 所以不需要考虑
                video.currentTime = current;
                $("#currentTime").text(getTimeResult(current));
            });
        
            // 播放完毕后 重置播放状态
            video.onended = function(){
                video.currentTime=0;
                $("#switch").text("▶");
            }

            // 按空格切换
            $(document).keyup(function(e){
                if (e.keyCode == 32) {
                     if (video.paused) {
                        video.play();
                        $("#switch").text("| |");
                    }else {
                        video.pause();
                        $("#switch").text("▶");
                    }
                    return false;
                }
            });
        });
    </script>
</body>
</html>